<template>
  <view class="waterfall">
    <custom-waterfalls-flow :value="list" ref="waterfallsFlowRef" :imageKey="'thumb_image'" @wapperClick="wapperClick" @imageClick="imageClick">
      <template v-slot:default="item">
        <view class="goodBox">
          <view class="distance" v-if="item.distance"> 附近 {{ item.distance }} </view>

          <view class="goodTitle">
            {{ item.title }}
          </view>

          <view class="userOption">
            <view class="flex-row justify-between">
              <image class="thumbnail_8" referrerpolicy="no-referrer" style="border-radius: 100rpx" :src="item.avatar" />
              <text class="text-group_3">{{ item.nickname }}</text>
            </view>

            <view class="align-center justify-between">
              <image @click="doLike(item)" mode="aspectFit" class="likeInco" :src="item.is_like ? '/static/productDetail/2.png' : '/static/productDetail/2a.png'" />
              <text class="text-goodBox" style="margin-left: 10rpx">{{ item.like }}</text>
            </view>
          </view>
        </view>
      </template>
    </custom-waterfalls-flow>
  </view>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {}
  },
  watch: {
    list(val) {
      if (val) {
        this.$refs.waterfallsFlowRef.refresh()
      }
    }
  },
  onLoad() {},
  components: {},
  created() {},
  onShow() {},
  methods: {
    doLike(val) {
      this.$http({
        url: 'like',
        data: {
          id: val.id,
          type: val.is_like ? 2 : 1
        },
        method: 'GET'
      }).then(res => {
        const list = JSON.parse(JSON.stringify(this.list))
        let index = list.findIndex(item => item.id == val.id)
        list[index].is_like = !list[index].is_like
        if (list[index].is_like) {
          list[index].like++
        } else {
          list[index].like--
        }
        this.$emit('update:list', list)
      })
    },
    wapperClick(item) {
      // console.log(item)
      // this.$to('/pages/productDetail/index?id=' + item.id)
    },
    imageClick(item) {
      this.$to('/pages/productDetail/index?id=' + item.id)
    }
  }
}
</script>

<style lang="css" scoped>
@import '../pages/common/common.css';
.distance {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 9px;
  font-size: 10px;
  color: #ffffff;
  position: absolute;
  left: 3px;
  top: -25px;
  padding: 2px 5px;
}
.likeInco {
  width: 16px;
  height: 15px;
  display: block;
}

.thumbnail_9 {
  width: 28rpx;
  height: 24rpx;
  display: block;
}

.text-goodBox {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  position: relative;
}
.image-text_22 {
  /*width: 90rpx;*/
  margin-top: 5rpx;
}
.text-group_3 {
  height: 24rpx;
  overflow-wrap: break-word;
  color: rgba(40, 40, 40, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
  width: 180rpx;
  margin-left: 5rpx;
  margin-top: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumbnail_8 {
  width: 36rpx;
  height: 36rpx;
}

.userOption {
  width: 100%;
  align-self: center;
  margin-top: 20rpx;
  display: flex;
}

.waterfall {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
  position: relative;
  padding-bottom: 0px;
}

.goodBox {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  padding: 10px;
  padding-bottom: 20rpx;
  position: relative;
}
.image-wrapper_1 {
  display: block;
  width: 100%;
}
.goodTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 14px;
  color: #161616;
}
</style>
